@using Yozeev.Web.Portal.Startup.Navigation
@model Yozeev.Web.Portal.Models.Account.RegisterViewModel

@{
    ViewBag.CurrentPageName = PortalNavPageNames.Register;
}

@section Scripts
    {

    <script src="~/pages/account/register.js" asp-append-version="true"></script>
}

@section Styles
    {

}
<!-- Register Form -->
<div class="container position-relative space-2">
    <form id="registerForm" class="js-validate loginForm w-md-75 w-lg-50 mx-md-auto"
          action="@Url.Action("Register","Account")" method="post">
        @Html.AntiForgeryToken()

        <!-- Title -->
        <div class="mb-7">
            <h2 class="h3 text-primary font-weight-normal mb-0">
                欢迎 <span class="font-weight-semi-bold">
                    回到52ABP
                </span>
            </h2>
            <p>
                注册属于您的账号，使用52ABP创建您的项目。52ABP 是终身学习者的编程知识社区
                保持好奇，刻意练习，每日精进。
            </p>
        </div>

        <!-- End Title -->
        <!-- Form Group -->
        <div class="js-form-message form-group">
            <label class="form-label" for="userName">@L("UserName")</label>
            <input type="text" class="form-control" id="userName" name="userName"
                   aria-label="请输入用户名" required
                   placeholder="@L("UserName")" value="@Model.UserName"
                   data-msg="请输入用户名"
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
        </div>
        <!-- End Form Group -->
        <!-- Form Group -->
        <div class="js-form-message form-group">
            <label class="form-label" for="emailAddress">@L("EmailAddress")</label>
            <input type="email" class="form-control" id="emailAddress" name="emailAddress"
                   aria-label="请输入有效的电子邮件地址." data-msg="请输入有效的电子邮件地址."
                   placeholder="@L("EmailAddress")" value="@Model.EmailAddress"
                   required data-error-class="u-has-error"
                   data-success-class="u-has-success">
        </div>
        <!-- End Form Group -->
        <!-- Form Group -->
        <div class="js-form-message form-group">
            <label class="form-label" for="password">
                <span class="d-flex justify-content-between align-items-center">
                    @L("Password")
                </span>
            </label>
            <input type="password" class="form-control" id="password" name="password"
                   placeholder="********" aria-label="********" required
                   data-msg="您的密码无效，请重新尝试。"
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
        </div>
        <div class="js-form-message form-group">
            <label class="form-label" for="confirmPassword">
                <span class="d-flex justify-content-between align-items-center">
                    @L("ConfirmPassword")
                </span>
            </label>
            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
                   placeholder="********" aria-label="********" required
                   data-msg="两次密码输入不一致"
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
        </div>
        <!-- End Form Group -->
        <div class="js-form-message mb-3">
            <label class="form-label" for="code">
                验证码（不区分大小写）：
                <span class="text-danger">*</span>
            </label>
            <div class="input-group">
                <input type="text" class="form-control" id="code" name="code"
                       placeholder="请填写验证码" aria-label="请填写验证码" required data-msg="请输入验证码，不能为空。"
                       data-error-class="u-has-error"
                       data-success-class="u-has-success">
                <div class="input-group-append">
                    <img id="val_code_img" alt="看不清？点击更换" />
                </div>
            </div>
        </div>
        <div class="js-form-message form-group">
            <div class="custom-control custom-checkbox custom-control-inline mb-3">
                <input type="checkbox" class="custom-control-input" id="termsCheckbox"
                       name="termsCheckbox" required
                       data-msg="请先同意用户协议"
                       data-error-class="u-has-error"
                       data-success-class="u-has-success">
                <label class="custom-control-label" for="termsCheckbox">
                    <small>
                        同意<a class="link-muted">用户协议</a>
                    </small>
                </label>
            </div>

            <div class="custom-control custom-checkbox custom-control-inline float-right mb-3">
                <span class="small text-muted">已有账号?点我</span>
                <a class="small" href="@Url.Action("Login","Account")">登陆</a>
            </div>
        </div>



        <!-- Button -->

        <div class="row align-items-center mb-5">
            <button id="loginButton" type="submit" class="btn btn-primary  btn-block transition-3d-hover">@L("Register")</button>

        </div>
        <!-- End Button -->
    </form>
</div>
<!-- End Login Form -->
